<template>
	<div>
		<template v-if="box == 1">
			<div class="maxbox">
				<img src="../../../public/loginimg/1.png">
				<h3>手机号注册/登录</h3>
			</div>
			<div class="middlebox">
				<input type="text" placeholder="请输入手机号">
				<div class="yzm">
					<input type="text" placeholder="请输入验证码">
					<button>获取验证码</button>
				</div>
				<button>一键注册/登录</button>
				<div class="action">
					<span @click="btn3()">非大陆手机号登陆</span>
					<span @click="btn1()">账号密码登录</span>
				</div>
			</div>
			<div class="bottombox">
				<div class="pic1">
					<p><img  src="../../../public/loginimg/2.png">
					<img src="../../../public/loginimg/3.png"></p>
				</div>
				<div class="pic2">
					<img src="../../../public/loginimg/4.png" v-show="show" @click="show=!show">
					<img src="../../../public/loginimg/5.png" v-show="!show" @click="show=!show">
					<span>未注册游侠客账号的手机,登录时间将同时注册,登录代表您已同意<a href="#">《服务条款》</a>和<a href="#">《隐私政策》</a></span>
				</div>
			</div>
			<div class="pic3">
				<span>体验游侠客微信小程序</span>
				<i class="iconfont">&#xe645;</i>
			</div>
		</template>
		<template v-if="box == 2">
			<div class="maxbox">
				<img src="../../../public/loginimg/1.png">
				<h3>账号密码登录</h3>
			</div>
			<div class="middlebox">
				<input type="text" placeholder="请输入手机号/邮箱">
				<div class="yzm">
					<input type="text" placeholder="请输入密码">
				</div>
				<button>登录</button>
				<div class="action">
					<span @click="btn4()">忘记密码</span>
					<span @click="btn2()">验证码登录</span>
				</div>
			</div>
			<div class="bottombox">
				<div class="pic1">
					<p><img  src="../../../public/loginimg/2.png">
					<img src="../../../public/loginimg/3.png" ></p>
				</div>
				<div class="pic2">
					<img src="../../../public/loginimg/4.png"  v-show="show" @click="show=!show">
					<img src="../../../public/loginimg/5.png" v-show="!show" @click="show=!show">
					<span>未注册游侠客账号的手机,登录时间将同时注册,登录代表您已同意<a href="#">《服务条款》</a>和<a href="#">《隐私政策》</a></span>
				</div>
			</div>
			<div class="pic3">
				<span>体验游侠客微信小程序</span>
				<i class="iconfont">&#xe645;</i>
			</div>
		</template>
		<template v-if="box == 3">
			<div class="maxbox">
				<img src="../../../public/loginimg/1.png">
				<h3>邮箱注册/登录</h3>
			</div>
			<div class="middlebox">
				<input type="text" placeholder="请输入邮箱">
				<div class="yzm">
					<input type="text" placeholder="请输入验证码">
					<button>获取验证码</button>
				</div>
				<button>登录</button>
				<div class="action">
					<span @click="btn2()">手机号登录</span>
					<span @click="btn1()">账号密码登录</span>
				</div>
			</div>
			<div class="bottombox">
				<div class="pic1">
					<p><img  src="../../../public/loginimg/2.png">
					<img  src="../../../public/loginimg/3.png"></p>
				</div>
				<div class="pic2">
					<img src="../../../public/loginimg/4.png" v-show="show" @click="show=!show">
					<img src="../../../public/loginimg/5.png" v-show="!show" @click="show=!show">
					<span>未注册游侠客账号的手机,登录时间将同时注册,登录代表您已同意<a href="#">《服务条款》</a>和<a href="#">《隐私政策》</a></span>
				</div>
			</div>
			<div class="pic3">
				<span>体验游侠客微信小程序</span>
				<i class="iconfont">&#xe645;</i>
			</div>
		</template>
		<template v-if="box == 4">
			<div class="maxbox2">
				<h3>重置密码</h3>
				<div class="yzm2">
					<input type="text" placeholder="请输入手机号/邮箱">
					<input type="text" placeholder="请输入验证码">
					<button>获取验证码</button>
				</div>
				<button class="next">下一步</button>
			</div>
		</template>
		
	</div>
</template>

<script>
	export default{
		name:'Login',
		data(){
			return {
				show : true,
				box : 1
			}
		},
		methods : {
			btn1(){
				this.box = 2;
			},
			btn2(){
				this.box = 1;
			},
			btn3(){
				this.box = 3;
			},
			btn4(){
				this.box = 4;
			}
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.maxbox{
		width: 100%;
	}
	.maxbox img{
		width: 20%;
		height: 20%;
		background-size: 100% 100%;
		display: flex;
		margin: 0 auto;
	}
	.maxbox h3{
		text-align: center;
		font-size: 0.35rem;
		line-height: 0.5rem;
		font-weight: bold;
	}
	.middlebox{
		width: 90%;
		margin-left: 10%;
	}
	.middlebox input{
		width: 90%;
		height: 0.8rem;
		text-indent: 1em;
		border-radius: 0.1rem;
		border: 0;
		outline: none;
		margin-top: 0.5rem;
	}
	.yzm{
		position: relative;
	}
	.yzm button{
		position: absolute;
		right: 10%;
		top: 50%;
		border: 0;
		color: #ecc927;
		background-color: white;
	}
	.yzm2 button{
		position: absolute;
		right: 10%;
		top: 64%;
		border: 0;
		color: #ecc927;
		background-color: white;
	}
	.middlebox button:nth-child(3){
		width: 90%;
		height: 0.9rem;
		border: 0;
		border-radius: 0.2rem;
		background-color: #fff6cc;
		color: #dfc9a7;
		margin-top: 0.5rem;
		font-size: 0.38rem;
	}
	.action{
		width: 90%;
		line-height: 0.9rem;
		font-size: 0.35rem;
		color: #D4D4D4;
	}
	.action span:nth-child(1){
		float: left;
	}
	.action span:nth-child(2){

		float: right;
	}
	.pic1{
		width: 100%;
		line-height: 1.2rem;
	}
	.pic1 img{
		width: 10%;
		height: 1rem;
		margin-left: 28%;
	}
	.bottombox{
		margin-top: 100%;
	}
	.pic2{
		width: 90%;
		margin: 0 auto;
	}
	.pic2 img{
		width: 4%;
		height: 0.4rem;
		margin-right: 0.1rem;
	}
	.pic2 span{
		color: #808080;
		line-height: 0.5rem;
		font-size: 0.35rem;
		width: 90%;
	}
	.pic3{
		margin-top: 0.5rem;
		text-align: center;
		line-height: 1.2rem;
		font-size: 0.4rem;
		color: #ecc927;
		border-top: 1px solid #f3f3f3;
	}
	.pic3 i{
		margin-left: 0.3rem;
	}
	.maxbox2{
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	.maxbox2 h3{
		line-height: 2rem;
		font-size: 0.75rem;
		font-weight: bold;
	}
	.maxbox2 input{
		width: 90%;
		height: 0.8rem;
		text-indent: 1em;
		border-radius: 0.1rem;
		border: 0;
		margin-top: 0.5rem;
		outline: none;
	}
	.next{
		color: red;
		width: 90%;
		height: 0.9rem;
		border: 0;
		border-radius: 0.2rem;
		background-color: #fff6cc;
		color: #dfc9a7;
		margin-top: 0.7rem;
		font-size: 0.38rem;
	}
</style>
